<template>
  <div class="empty-state">
    <div class="empty-icon">
      <img src="@/assets/nodata.png" alt="暂无数据" class="nodata-image" />
    </div>
    <div class="empty-text">{{ text }}</div>
    <button v-if="showButton" class="empty-action-btn" @click="handleAction">
      <span>{{ buttonText }}</span>
    </button>
  </div>
</template>

<script setup lang="ts">
interface Props {
  text?: string
  buttonText?: string
  showButton?: boolean
}

const { 
  text = '暂无数据', 
  buttonText = '+ 创建', 
  showButton = true 
} = defineProps<Props>()

const emit = defineEmits<{
  action: []
}>()

const handleAction = () => {
  emit('action')
}
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  /* background: #e9e9eb; */
  border-radius: 8px;
  /* margin: 20px 0; */
}

.empty-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 按照UI设计图要求：宽50px高40px */
.nodata-image {
  width: 50px;
  height: 40px;
  opacity: 0.6;
}

/* 深灰色文字 */
.empty-text {
  font-size: 14px;
  color: #666666; /* 深灰色 */
  margin-bottom: 20px;
  font-weight: normal;
}

/* 创建教学任务按钮样式 */
.empty-action-btn {
  background: #dadbe0; /* 指定的背景颜色 */
  color: #000000; /* 黑色文字 */
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: none; /* 移除过渡效果 */
  font-weight: normal;
}

.empty-action-btn:hover {
  background: #c8c9ce; /* 稍微深一点的颜色 */
}
</style>
